<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选中文字弹出提示</title>
    <style>
        .content {
            width: 400px;
        }

        .pop {
            width: 100px;
            background-color: #369;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>
<body>
<div class="pop"></div>
<div class="content">
    这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字这是测试的文字
</div>
</body>
</html>

<script>
    var content = document.getElementsByClassName("content")[0];
    var pop = document.getElementsByClassName("pop")[0];
    content.onmouseup = function (e) {
        var e = e || window.event;
        var x = e.clientX;
        var y = e.clientY;
        pop.style.top = y+5 + 'px';
        pop.style.left = x+5 + 'px';
        var text = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
        if(text){
            pop.style.display = 'block';
            pop.innerText = text;
        }else {
            pop.style.display = 'none';
        }
    }
</script>